<template>
  <!-- 全部 -->
  <div class="data_model_all">
    <div class="data_model_model" v-for="(v, i) in ArrAy" :key="i">
      <div class="data_model_top" v-show="v.total == 0 ? false : true">
        <span style="width: 100%; height: 100%; display: flex; align-items: center">
          <h2 style="padding: 10px">{{ v.metadataModelName }}</h2>
          <p style="margin-top: 30px">共{{ v.total }}条结果</p>
        </span>
        <span v-if="v.metadataModelName == '数据模型'" style="color: blue; display: inline-block; width: 100px"
          @click="dataModelook('second')">查看更多....</span>
        <span v-else-if="v.metadataModelName == '字段'" style="color: blue; display: inline-block; width: 100px"
          @click="dataModelook('third')">查看更多....</span>
      </div>




      <div class="data_model_buttom" v-if="v.metadataModelName == '数据模型'">
        <div class="data_model_dev" v-for="(v1, i1) in v.modelList.slice(0, 6)" :key="i1"
          v-show="v.total == 0 ? 'true' : 'false'" @click="modelClick(v1.metadataTableModelId)">
          <img :src="require('../../../assets/img/shujubiao.png')" alt="" />
          <div style="display: flex; flex-direction: column; align-items: flex-start">
            <p>资产名称： <span v-html="brightenKeyword(v1.tableComment, filtersTitle)"></span></p>
            <p>英文名称：<span v-html="brightenKeyword(v1.tableName, filtersTitle)"></span></p>
            <p>资产编码：<span v-html="brightenKeyword(v1.assetNumber, filtersTitle)"></span></p>
            <p>数据目录：<span v-html="brightenKeyword(v1.pathValue, filtersTitle)"></span></p>
            <p>描述：<span v-html="brightenKeyword(v1.description, filtersTitle)"></span></p>
          </div>
        </div>
      </div>
      <div class="data_model_buttom" v-else-if="v.metadataModelName == '字段'">
        <div class="data_model_dev" v-for="(v1, i1) in v.modelList.slice(0, 6)" :key="i1"
          v-show="v.total == 0 ? 'true' : 'false'">
          <img :src="require('../../../assets/img/字段信息.png')" alt="" />
          <div style="display: flex; flex-direction: column; align-items: flex-start">
            <p>字段名称： <span v-html="brightenKeyword(v1.columnName, filtersTitle)"></span></p>
            <p>字段编码：<span v-html="brightenKeyword()"></span></p>
            <p>所属表：<span v-html="brightenKeyword(v1.tableComment, filtersTitle)"></span></p>
            <p>描述：<span v-html="brightenKeyword(v1.remarks, filtersTitle)"></span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSearchAll } from '@/api/modelDataApi/index'
export default {
  props: ['valueprops'],
  data() {
    return {
      ArrAy: [],
      filtersTitle: '实时信息',
      fullscreenLoading: false
    }
  },

  mounted() {
    this.getArray(this.filtersTitle)
  },
  methods: {
    modelClick(item) {
      this.$router.push({
        path: "/metadata/metaModel/model",
        query: {
          id: item
        }
      })
    },

    getArray(item) {
      this.fullscreenLoading = true;
      this.filtersTitle = item
      getSearchAll({
        params: { searchName: item },
      }).then((res) => {
        this.ArrAy = res.data
        this.fullscreenLoading = false;
      })
    },
    //搜索高亮
    brightenKeyword(val, keyword) {
      const Reg = new RegExp(keyword, 'i')
      if (val) {
        return val.replace(Reg, `<span style="color: red;">${keyword}</span>`)
      }
    },
    dataModelook(type) {
      this.$emit('modeltype', type)
    },
  },
}
</script>
<style scoped>
.data_model_all {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}

.data_model_model {
  width: 100%;
}

.data_model_top {
  width: 100%;
  height: 5vh;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.data_model_buttom {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.data_model_dev:hover {
  border: 2px solid black;
}

.data_model_buttom div {
  width: 26vw;
  height: 100%;
  display: flex;
  align-items: center;
}

.data_model_buttom div img {
  width: 60px;
  height: 60px;
  margin: 30px;
}

.data_model_dev {
  width: 20vw;
  height: 100%;
  margin: 16px;
  border: 1px solid #ccc;
}
</style>
